const { createApp } = Vue;

createApp({
    data() {
        return {
            selectedTemplate: '',
            timeRange: 'today',
            templates: [],
            stats: {
                totalTasks: 0,
                tasksTrend: 0,
                totalSubmissions: 0,
                submissionsTrend: 0,
                approvalRate: 0,
                approvalTrend: 0,
                activeUsers: 0,
                usersTrend: 0,
                detailList: []
            },
            charts: {
                taskStatus: null,
                submissionTrend: null
            }
        }
    },
    methods: {
        async loadTemplates() {
            try {
                const response = await fetch('/api/admin/templates');
                const data = await response.json();
                if (data.code === 200) {
                    this.templates = data.data;
                }
            } catch (error) {
                console.error('加载模板列表失败:', error);
            }
        },
        async loadStatistics() {
            try {
                const params = new URLSearchParams({
                    template_id: this.selectedTemplate,
                    time_range: this.timeRange
                });

                const response = await fetch(`/api/admin/statistics/all?${params}`);
                const data = await response.json();
                
                if (data.code === 200) {
                    this.stats = data.data;
                    this.updateCharts();
                }
                if(data.code == 500){
                    window.top.location.href = '/pages/login.html';
                }
            } catch (error) {
                console.error('加载统计数据失败:', error);
            }
        },
        initCharts() {
            // 初始化任务状态分布图表
            this.charts.taskStatus = echarts.init(document.getElementById('taskStatusChart'));
            this.charts.submissionTrend = echarts.init(document.getElementById('submissionTrendChart'));
        },
        updateCharts() {
            // 更新任务状态分布图表
            this.charts.taskStatus.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [{
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: this.stats.statusDistribution?.pending || 0, name: '待审核' },
                        { value: this.stats.statusDistribution?.approved || 0, name: '已通过' },
                        { value: this.stats.statusDistribution?.rejected || 0, name: '已拒绝' },
                        { value: this.stats.statusDistribution?.processing || 0, name: '进行中' }
                    ]
                }]
            });

            // 更新提交趋势图表
            this.charts.submissionTrend.setOption({
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['提交数量', '通过数量']
                },
                xAxis: {
                    type: 'category',
                    data: this.stats.trendData?.dates || []
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '提交数量',
                    type: 'line',
                    smooth: true,
                    data: this.stats.trendData?.submissions || []
                }, {
                    name: '通过数量',
                    type: 'line',
                    smooth: true,
                    data: this.stats.trendData?.approved || []
                }]
            });
        },
        refreshStats() {
            this.loadStatistics();
        },
        handleResize() {
            this.charts.taskStatus?.resize();
            this.charts.submissionTrend?.resize();
        }
    },
    watch: {
        selectedTemplate() {
            this.loadStatistics();
        },
        timeRange() {
            this.loadStatistics();
        }
    },
    mounted() {
        this.loadTemplates();
        this.initCharts();
        this.loadStatistics();
        window.addEventListener('resize', this.handleResize);
    },
    unmounted() {
        window.removeEventListener('resize', this.handleResize);
    }
}).mount('#statisticsApp'); 